<template>

	<view class="ctn">
		<hx-navbar title="文案助手" :fixed="true" :background-color="[[28, 187, 180],[141, 198, 63]]" color="#ffffff" />
		<view class="pa"></view>
		<carousel :img-list="imgList" url-key="url" @selected="selectedBanner" />
		<view class="adContainer" style="width: 100%;" >
		<ad unit-id="adunit-15ca454352b1e36b"  ad-intervals="30"></ad>
		</view>
		<view class="part">
			<view class="part_one" @click="line(0)">
				<view class="line"></view>
				网易云热评
			</view>
			<view class="part_two" @click="line(1)">
				<view class="line1"></view>
				暧昧情话
			</view>
			<view class="part_three" @click="line(2)">
				<view class="line2"></view>
				搞笑神评
			</view>
			<view class="part_four" @click="line(3)">
				<view class="line3"></view>
				社会语录
			</view>
		</view>
		<!--文案广场-->
		<view class="an">
			<view class="an_left">文案广场</view>
			<view class="an_right" @click="line(0)">更多</view>
		</view>
		<!--列表-->

		<view class="list" v-for="(item, index) in cardList" :key="index">
			<view class="list_left">
				<view  @click="copy(item.content)"   class="list_left_top1">
					{{item.content}}
				</view>

				<view class="list_left_bottom">
					热度：★★★★★
				</view>

			</view>
			<view class="list_right"   @click="copy(item.content)">
				<view class="list_right_bottom1">
					伤感
				</view>
				<view class="list_right_bottom_1">
					点击复制
				</view>
			</view>
		</view>


		<view class="list1" v-for="(item, index) in cardList" :key="index">
			<view  class="list_left">
				<view class="list_left_top">
					{{item.star}}
				</view>

				<view class="list_left_bottom">
					热度：★★★★★
				</view>

			</view>
			<view class="list_right1" @click="copy(item.content)">
				<view class="list_right_bottom">
					唯美
				</view>
				<view class="list_right_bottom_1" style="background-color: #6887ad; color: #fff">
					点击复制
				</view>
			</view>
		</view>





	</view>

</template>

<script>
	var that;
	import carousel from '@/components/vear-carousel/vear-carousel'
	import uniCopy from '@/js_sdk/xb-copy/uni-copy.js'
	export default {
		components: {
			carousel
		},
		data() {
			return {

				loadMoreStatus: 1, //0加载前，1加载中，2没有更多了
				startNum: 0,
				imgList: [{
					url: 'https://img9.51tietu.net/pic/2019-091200/vgkpidei2tjvgkpidei2tj.jpg',
					id: 1
				}, {
					url: 'https://img9.51tietu.net/pic/2019-091200/euzekmi5m23euzekmi5m23.jpg',
					id: 2
				}, {
					url: 'https://img9.51tietu.net/pic/2019-091200/143tt0ta4sr143tt0ta4sr.jpg',
					id: 3
				}, {
					url: 'https://img9.51tietu.net/pic/2019-091200/ff1vqwm3q33ff1vqwm3q33.jpg',
					id: 4
				}, ],
				cardList: [{
					id: 1,
					tag: '唯美',
					url: 'https://6d61-matchbox-79a395-1302390714.tcb.qcloud.la/matchbox/cat.jpg',
					content: '洛稚喜欢盛淮南谁也不知道2',
					follow: false,
					isLike: false,
					likeNum: '24',
					star: '0',
					hot: true
				}],

			}
		},
		onLoad() {
			that = this;
			that.loadData('add');
			this.getHomePosts();
			this.line();
		},
		onReachBottom() {
			that.startNum++;
			//上滑加载
			that.loadData('add');
		},
		methods: {
			navigate(url) {
				uni.navigateTo({
					url: url
				});
			},
			loadData(type) {
				if (type === 'add') {
					// 上拉加载
					let list = that.cardList;
					if (list.length == 2) {
						that.loadMoreStatus = 2;
						that.getHomePosts()
					} else if (list.length > 0) {
						that.getHomePosts()
					} else {
						that.cardList = that.$store.state.diary.cardList
					}
				} else {
					//下拉刷新
					that.$refs.mixPulldownRefresh && that.$refs.mixPulldownRefresh.endPulldownRefresh();
					that.getHomePosts()
				}
			},
			getHomePosts() {
				var that = this;
				uni.request({
					url: 'https://cdn.ipayy.net/wangyy/api.php',
					success: (res) => {
						that.comments = res.data.content;
						that.cardList.forEach((item) => {
							item.content = that.comments

						})

					}
				})

				uni.request({
					url: 'https://api.vvhan.com/api/reping',
					success: (res) => {

						that.comments = res.data.data.content;
						that.cardList.forEach((item) => {
							item.star = that.comments

						})

					}
				})

			},


			//下拉刷新
			onPulldownReresh() {
				that.loadData('refresh');
				that.getHomePosts()
			},
			line(data) {
				// 设置本地缓存传参
				switch (data) {
					case 0:
						uni.setStorageSync('storage_key', '0')
						uni.reLaunch({
							url: '/pages/book/book'

						});

						break;
					case 1:
						uni.setStorageSync('storage_key', '1')
						uni.reLaunch({
							url: '/pages/book/book'
						});
						break;
					case 2:
						uni.setStorageSync('storage_key', '2')
						uni.reLaunch({
							url: '/pages/book/book'
						});
						break;
					case 3:
						uni.setStorageSync('storage_key', '3')
						uni.reLaunch({
							url: '/pages/book/book'
						});
						break;
				}
			},
			copy(data) {
				uniCopy({
					content: data,
					success: (res) => {
						console.log(res)
						uni.showToast({
							title: res,
							icon: 'success'
						})
					},
					error: (e) => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 3000,
						})
					}
				})
			}
		},

	}
</script>

<style>
	uni-page-body {
		padding: 10px !important;
	}

	.pa {
		margin-top: 90rpx;
	}

	.part {
		width: 100%;
		height: 130px;
		display: flex;
		padding-top: 10px;
		padding-left: 2px;
		padding-right: 2px;
		justify-content: space-between;

	}

	.line,
	.line1,
	.line2,
	.line3 {
		width: 60px;

		border-radius: 20%;
		height: 4px;
		margin: 0 auto;
	}

	.line {
		background-color: #f89f91;
	}

	.line1 {
		background-color: #a4c1eb;
	}

	.line2 {
		background-color: #c9c9c9;
	}

	.line3 {
		background-color: #b4b4f6;
	}

	.part_one,
	.part_two,
	.part_three,
	.part_four {
		background-size: 100% 100%;
		width: 85px;
		height: 108px;
		text-align: center;
		line-height: 60px;
		font-weight: bold;
	}

	.part_one {

		background-image: url(../../static/wm4.png);

		color: #e1a5a2;
	}

	.part_two {

		background-image: url(../../static/wm1.png);

		color: #6887ad;
	}

	.part_three {

		background-image: url(../../static/wm2.png);

		color: #7f7878;
	}

	.part_four {

		background-image: url(../../static/wm3.png);

		color: #9494d4;

	}

	.an {
		width: 100%;
		align-items: center;
		font-weight: bold;
		font-size: 15px;
		height: 40px;
		display: flex;
		padding-left: 20rpx;
		padding-right: 20rpx;
		justify-content: space-between;
	}

	.list {
		background-color: #fee9e6;

		background-image: linear-gradient(to right, #feede3, #fee9e6, #feefee);
	}

	.list1 {
		background-color: #fee9e6;

		background-image: linear-gradient(to right, #e8f2fe, #e9f1fb, #f3f7fc);
	}

	.list,
	.list1 {
		width: 100%;
		height: 136px;
		border-radius: 8%;
		display: flex;
		margin-bottom: 10px;
		box-shadow: 5px 5px 5px #d6d6d6;
		justify-content: space-between;
	}

	.list_left {
		width: 260px;
		height: 100%;
		display: flex;
		padding: 10px;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;


	}

	.list_left_top1 {
		color: #ce7d7c;
	}

	.list_left_top {
		color: #6887ad;
	}

	.list_left_top1,
	.list_left_top {
		font-size: 16px;

		font-weight: bold;
		display: flex;
		margin-top: 20px;
		align-items: center;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 3;
		/** 显示的行数 **/
	}

	.list_left_bottom {
		height: 20%;
		font-weight: bold;
		display: flex;
		font-size: 10px;
		color: #ce7d7c;
		justify-content: flex-start;

	}

	.list_right_bottom {
		color: #6887ad;
	}

	.list_right_bottom1 {
		color: #ce7d7c;
	}

	.list_right_bottom,
	.list_right_bottom1 {
		justify-content: flex-start;
		height: 20%;
		font-weight: bold;
		display: flex;
		font-size: 14px;
		margin-top: 10px;
		margin-right: 5px;
	}

	.list_right {

		background-image: url(../../static/wm11.png);

	}

	.list_right1 {

		background-image: url(../../static/wm5.png);

	}

	.list_right,
	.list_right1 {
		width: 100px;
		background-repeat: no-repeat;
		background-position: center;
		padding-right: 10px;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;

		justify-content: space-between;
		align-items: flex-end
	}

	.list_right_bottom_1 {
		width: 70px;
		height: 24px;
		color: #F0F0F0;
		border-radius: 35%;
		text-align: center;
		margin-bottom: 12px;
		background-color: #ce7d7c;
		-webkit-border-radius: 20px;

		-moz-border-radius: 20px;

		border-radius: 20px;
	}
	.adContainer {
	  width: 100%;
	}
</style>
